<template>
    <Layout title="商品详情" :footer="false">
        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item
                v-for="item in thisData.pics"
                :key="'banner' + item.id"
            >
                <img v-lazy="item.mid_url" alt="" />
            </van-swipe-item>
        </van-swipe>
        <div class="good-title van-hairline--bottom">
            <h2 class="van-ellipsis">
                <van-tag color="#69caa4" v-if="thisData.is_promote"
                    >促销</van-tag
                >
                <span>{{ thisData.name }}</span>
            </h2>
            <p>
                <span>{{
                    thisData.is_promote
                        ? thisData.promote_price
                        : thisData.price
                }}</span>
                <span>{{ thisData.price }}</span>
                <span>销量：{{ thisData.sales }}</span>
            </p>
        </div>
        <van-cell title="规格" is-link value="标准"></van-cell>
        <van-tabs type="card" sticky>
            <van-tab title="详情">
                <div v-html="thisData.introduce"></div>
            </van-tab>
            <van-tab title="评价">
                <div class="comment-filter van-hairline--bottom">
                    <a
                        :class="{ on: commentFilter == 0 }"
                        @click="commentFilterChange(0)"
                        href="javascript:;"
                        >全部评价{{ thisData.comment_all }}</a
                    >
                    <a
                        :class="{ on: commentFilter == 1 }"
                        @click="commentFilterChange(1)"
                        href="javascript:;"
                        >好评{{ thisData.comment_excellent }}</a
                    >
                    <a
                        :class="{ on: commentFilter == 2 }"
                        @click="commentFilterChange(2)"
                        href="javascript:;"
                        >中评{{ thisData.comment_middle }}</a
                    >
                    <a
                        :class="{ on: commentFilter == 3 }"
                        @click="commentFilterChange(3)"
                        href="javascript:;"
                        >差评{{ thisData.comment_bad }}</a
                    >
                    <a
                        :class="{ on: commentFilter == 4 }"
                        @click="commentFilterChange(4)"
                        href="javascript:;"
                        >有图评价{{ thisData.comment_img }}</a
                    >
                </div>
                <van-list
                    v-model="loading"
                    @load="getComment"
                    :finished="finished"
                    finished-text="没有更多了"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                >
                    <div
                        class="comment-list van-hairline--bottom"
                        v-for="(item, index) in commentList"
                        :key="index"
                    >
                        <h2>
                            <span>{{ item.user_name }}</span>
                            <span>{{ item.add_time }}</span>
                        </h2>
                        <p>
                            {{ item.content }}
                        </p>
                        <ul>
                            <li v-for="jtem in item.pics" :key="jtem">
                                <img :src="jtem" alt="" />
                            </li>
                        </ul>
                        <span>购买日期：{{ item.order_time }}</span>
                    </div>
                </van-list>
            </van-tab>
            <van-tab title="售后">
                <div v-html="config.aftersale_info"></div>
            </van-tab>
        </van-tabs>
        <van-goods-action>
            <van-goods-action-icon
                icon="chat-o"
                text="客服"
                @click="onContractClicked"
            ></van-goods-action-icon>
            <van-goods-action-icon
                icon="star"
                text="收藏"
                v-if="!collect"
                @click="onCollectClicked('收藏')"
            ></van-goods-action-icon>
            <van-goods-action-icon
                icon="star"
                text="取消收藏"
                v-else
                @click="onCollectClicked('取消收藏')"
            ></van-goods-action-icon>
            <van-goods-action-button
                color="#365c72"
                text="加入购物车"
                @click="onPopupClicked('cart')"
            ></van-goods-action-button>
            <van-goods-action-button
                color="#5293ba"
                text="立即购买"
                @click="onPopupClicked('buy')"
            ></van-goods-action-button>
        </van-goods-action>
        <van-popup v-model="show" position="bottom">
            <dl class="good-sku-tit">
                <dt>
                    <van-image
                        v-if="thisData.pics"
                        :src="
                            thisData.pics.length ? thisData.pics[0].mid_url : ''
                        "
                    ></van-image>
                </dt>
                <dd>
                    <h2 class="van-ellipsis">{{ thisData.name }}</h2>
                    <p>
                        {{
                            thisData.is_promote
                                ? thisData.promote_price
                                : thisData.price
                        }}
                    </p>
                </dd>
            </dl>
            <template v-if="thisData.sku">
                <dl
                    class="good-sku-con"
                    v-for="item in thisData.sku"
                    :key="item.id"
                >
                    <dt>{{ item.name }}</dt>
                    <dd>
                        <van-button
                            v-for="jtem in item.value"
                            :key="jtem"
                            @click="onSkuClicked(item, jtem)"
                            :type="
                                item.selected_value == jtem ? 'info' : 'default'
                            "
                            plain
                            size="mini"
                        >
                            {{ jtem }}
                        </van-button>
                    </dd>
                </dl>
            </template>
            <dl class="good-sku-con">
                <dt>购买数量</dt>
                <dd>
                    <van-stepper
                        v-model="good_count"
                        min="0"
                        button-size="0.64rem"
                    />
                </dd>
            </dl>
            <van-button @click="onSubmit" block type="info">确定</van-button>
        </van-popup>
    </Layout>
</template>

<script src="./js/goodLists.js"></script>
<style lang="less" scoped src="./less/goodLists.less"></style>